<template>
	<view class="container">
		<view class="top" v-if="result!=''">
			<view class="top-rows">
				<view class="top-row">
					<view class="number">{{result.td_all_num}}</view>
					<view class="tit large">团队总人数</view>
				</view>
				<view class="top-row">
					<view class="number">{{result.td_ry_yeji}}</view>
					<view class="tit large">团队总业绩</view>
				</view>
			</view>
			<view class="top-rows">
				<view class="top-row">
					<view class="number">{{result.day_td_ry_yeji}}</view>
					<view class="tit">日团队认养金额</view>
				</view>
				<view class="top-row">
					<view class="number">{{result.td_month_yeji}}</view>
					<view class="tit">月团队认养金额</view>
				</view>
			</view>
			<view class="top-rows">
				<view class="top-row">
					<view class="number">{{result.daqu_yeji}}</view>
					<view class="tit">大市场</view>
				</view>
				<view class="top-row">
					<view class="number">{{result.xiaoqu_yeji}}</view>
					<view class="tit">小市场</view>
				</view>
			</view>
		</view>
		<view class="lists">
			<my-tab :list="list1" :current="currentIndex" @itemClick='itemClick'></my-tab>
			<view class="body_container" v-if="teamList.length>0">
				<view class="team_item" v-for="(item,index) in teamList" :key="index">
					<image :src="item.head_pic" class="head-pic"/>
					<view class="team_item_right">
						<view class="team_item_top">
							<view class="nickname">
								<text class="text1">{{item.nickname}}</text>
								<text class="text2" v-if="false">{{item.level_name}}</text>
							</view>
							<view class="bot-desc">
								<text>认养订单:{{item.ry_num}}单</text>
								<text>认养金额:{{item.ry_money}}元</text>
							</view>
						</view>
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/more-grey.png" mode="widthFix" class="team-item-right-img"></image>
					</view>
				</view>
			</view>
			<view class="empty-container" v-else>
				<u-empty text="暂无相关数据" :icon="emptyIcon"></u-empty>
			</view>
		</view>
		<u-loadmore :status="hasMore?'loading':'nomore'" v-if="teamList.length>0"/>
	</view>
</template>

<script>
	var _this
	export default {
		data() {
			return {
				list1: [{
					name: '一级客户',
				}, {
					name: '二级客户',
				}],
				currentIndex: 0,
				emptyIcon:'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/empty.png',
				teamList: [],
				pageIndex: 1,
				hasMore:true,
				result:''
			}
		},
		onLoad() {
			_this=this
			this.getTdList()
		},
		onReachBottom() {
			if(this.hasMore){
				this.pageIndex++
				this.getTdList()
			}
		},
		methods: {
			itemClick(index){
				_this.currentIndex=index
				_this.pageIndex=1
				_this.teamList=[]
				_this.getTdList()
			},
			async getTdList(){
				const params = {
					ceng:_this.currentIndex,
					pageIndex: _this.pageIndex,
					pageSize: 20,
				}
				const data=await _this.$post('api/get_td_list',params)
				if(data.code==200){
					this.result=data.data.result
					this.teamList.push(...data.data.list)
					this.hasMore=data.data.list.length>=params.pageSize
				}else{
					this.hasMore=false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.top{
			background: $theme-color;
			border-radius: 20rpx;
			.top-rows{
				@include flex-box(row,space-around,center);
				height: 150rpx;
				box-sizing: border-box;
				&:not(:last-child){
					border-bottom: 2rpx dashed #fff;
				}
				.top-row{
					color: #fff;
					text-align: center;
					.number{
						font-weight: 500;
						font-size: 40rpx;
					}
					.tit{
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 20rpx;
					}
					.large{
						font-size: 26rpx;
						font-weight: bold;
					}
				}
			}
		}
		.lists{
			border-radius: 20rpx;
			margin-top: 20rpx;
			background: #fff;
		}
		.body_container{
			padding: 0 30rpx;
			.team_item {
				@include flex-box(row,null,center);
				position: relative;
				padding: 30rpx 0;
				.head-pic {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				&:not(:last-child){
					border-bottom:$global-border;
				}
				.team_item_right{
					flex: 1; 
					@include flex-box(row,space-between,center);
					.team_item_top{
						@include flex-box(column,space-around);
						.nickname{
							.text1{
								font-size: 30rpx;
								font-weight: 500;
							}
							.text2{
								background-color: $theme-color;
								color: #fff;
								height: 24rpx;
								border-radius: 2px;
								line-height: 24rpx;
								text-align: center;
								margin-left: 10rpx;
								padding: 4rpx 10rpx;
							}
						}
						.bot-desc{
							margin-top: 10rpx;
							text{
								font-size: 24rpx;
								&:not(:last-child){
									margin-right: 10rpx;
								}
							}
						}
					}
					.team-item-right-img{
						width: 20rpx;
					}
				}
			}
		}
	}
	.empty-container{
		padding: 5% 0 10% 0;
	}
</style>
